<template>
    <view>
        <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
            <uni-group top="0">
				<uni-forms-item class="passinglist" @tap="topassinglist()">
					<span class="iconfont icon-tongxing"></span><span style="color:#51c4d3">访客记录</span>
				</uni-forms-item>
                <uni-forms-item required label="访客姓名" name="name">
                    <uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入姓名"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="性别">
                    <uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
                </uni-forms-item>
				<!-- 使用原生input，需要绑定binddata -->
				<uni-forms-item name="phonenumber" required label="手机号">
					<input type="text" v-model="formData.phonenumber" class="uni-input-border" @blur="binddata('phonenumber', $event.detail.value)" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item name="room" required label="到访地址">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.room" placeholder="请输入地址"></uni-easyinput>
				</uni-forms-item>
                <uni-forms-item name="reason" required label="来访缘由">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.reason" placeholder="请输入理由"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="date" label="预约时间">
					<uni-date-picker v-model="formData.date"></uni-date-picker>
				</uni-forms-item>
				<uni-forms-item name="object" required label="备注">
					<uni-easyinput type="text" placeholder="请填写备注"></uni-easyinput>
				</uni-forms-item>
            </uni-group>
            <view>
                <button class="btn" @click="submitForm('form')"><span style="color:white">生成通行信息</span></button>
                <view class="text">通行证只在当天有效，逾期将需要重新申请</view>
            </view>
        </uni-forms>
    </view>
</template>

<script>
import { uniForms } from "@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue";
import { uniFormsItem } from "@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue";
import { uniEasyinput, uniDataCheckbox } from '@dcloudio/uni-ui';
import { uniGroup } from '@dcloudio/uni-ui/lib/uni-group/uni-group.vue';
import { uniDatePicker } from '@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue'

export default {
    data() {
        return {
            value: 0,
            range: [
                {
                    "value": 0,
                    "text": "女"
                },
                {
                    "value": 1,
                    "text": "男"
                }
            ],
            formData: {
				index:'',
				name: '',
                reason: '',
				object: '',
			},
            rules: {
				name: {
					rules: [{
						required: true,
						errorMessage: '请输入用户名'
					},
					{
						minLength: 3,
						maxLength: 15,
						errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
					}]
				},
				phonenumber: {
					rules: [{
						required: true,
						errorMessage: '请输入电话'
					},
					{
						format: 'int',
						errorMessage: '电话必须是数字'
					}],
				},
				room: {
					rules: [{
						required: true,
						errorMessage: '请输入维修地址'
					}]
				},
				date: {
					rules: [{
						required: true,
						errorMessage: '请选择时间'
					}],
				},
                reason:{
                    rules:[{
                        required:true,
                        errorMessage: '请填写理由'
                    }]
                }
            },
        }
    },
    components: {
        uniForms, 
        uniFormsItem,
        uniEasyinput,
        uniDataCheckbox,
        uniGroup,
        uniDatePicker,
    },
    methods: {
		// 访客列表
		topassinglist() {
            uni.navigateTo({
                url: "./passinglist",
            });
        },
        change(e) {
            console.log('e',e);
        },
        submitForm(form) {
			this.$refs[form]
			.submit()
			.then(res => {
				console.log('表单的值：', res)
				uni.showToast({
					title: '上传成功'
				})
				uni.navigateTo({
					url: "./passingcode",
				});
			})
			.catch(errors => {
				console.error('验证失败：', errors)
			})
		},
        //重置表单 。原生的组件input组件不能重置表单
		resetForm() {
			this.$refs.form.resetFields()
		},
    },
}
</script>


<style>
.icon-tongxing{
	width: 30px;
}
.repairlist {
	font-size: 15px;
	margin-top: -18px;
}
.text{
    text-align: center;
}
.uni-input-border {
	padding: 0 10px;
	height: 35px;
	width: 100%;
	font-size: 14px;
	color: #666;
	border: 1px #e5e5e5 solid;
	border-radius: 5px;
	box-sizing: border-box;
}
.btn {
	width: 250px;
	background-color: #51c4d3;
}
#dialog {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  /* text-align: center; */
  width: 100%;
  position: absolute;
  top: 15;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
}
</style>